<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>生态瞬时评估 - 主页</title>

    <meta name="keywords" content="">
    <meta name="description" content="">

    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->

    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <h3 class="col-sm-offset-3 col-sm-6 text-center">人员信息</h3>
        </div>
        <div class="row">
            <div class="col-sm-offset-3 col-sm-6">
                <form class="form-horizontal" style="margin-top: 20px">
                    <div class="form-group">
                        <label for="user" class="col-sm-3 control-label">用户名：</label>
                        <div class="col-sm-8">
                            <input type="text" placeholder="用户名" class="form-control" id="user">
                        </div>
                    </div>
                    <!--<div class="form-group">-->
                        <!--<label for="pwd" class="col-sm-3 control-label">密码：</label>-->
                        <!--<div class="col-sm-8">-->
                            <!--<input type="password" placeholder="密码" class="form-control" id="pwd">-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="form-group">
                        <label for="user-name" class="col-sm-3 control-label">真实姓名：</label>
                        <div class="col-sm-8">
                            <input type="text" placeholder="真实姓名" class="form-control" id="user-name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="user-name" class="col-sm-3 control-label">联系方式：</label>
                        <div class="col-sm-8">
                            <input type="text" placeholder="输入正确的联系方式" class="form-control" id="telphone" maxlength="11">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">性别：</label>
                        <div class="col-sm-8" id="sex">
                            <div class="radio-inline i-checks">
                                <label>
                                    <input type="radio" value="0" name="sex" checked> <i></i> 男</label>
                            </div>
                            <div class="radio-inline i-checks">
                                <label>
                                    <input type="radio" value="1" name="sex"> <i></i> 女</label>
                            </div>
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">出生日期：</label>
                        <div class="col-sm-8">
                            <input type="text" class="laydate-icon form-control layer-date" id="birthday" placeholder="选择出生日期">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">角色：</label>
                        <div class="col-sm-8" id="role">
                            <div class="radio-inline i-checks">
                                <label>
                                    <input type="radio" value="0" name="role"> <i></i> 实验者</label>
                            </div>
                            <div class="radio-inline i-checks">
                                <label>
                                    <input type="radio" value="1" name="role"> <i></i> 被试者</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-offset-3 col-sm-8">
                        <input type="button" id="change" value="修改" class="btn btn-primary btn-block">
                    </div>
                </form>
            </div>
        </div>

    </div>




    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <!-- layerDate plugin javascript -->
    <script src="../js/plugins/layer/laydate/laydate.js"></script>
    <script>
        //外部js调用
        laydate({
            elem: '#birthday', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'focus' //响应事件。如果没有传入event，则按照默认的click
        });


    </script>
    <!--icheck-->
    <script src="../js/plugins/iCheck/icheck.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });


            var userId = localStorage.getItem("userID");
            var token = sessionStorage.getItem("token");
            $.ajax({
                url:"http://123.206.18.189:8080/users/"+userId,
                type:"GET",
                headers:{
                   authToken:token
                },
                datatype:"json",
                success:function (res) {
                    $("#user").val(res.userName);
                    $("#pwd").val(res.password);
                    $("#user-name").val(res.realName);
                    $("#telphone").val(res.telephone);
                    var birthday = new Date(res.birthday);
                    var y = birthday.getFullYear();
                    var m = (birthday.getMonth()+1)<10?"0"+(birthday.getMonth()+1):birthday.getMonth()+1;
                    var d = birthday.getDate()<10?"0"+birthday.getDate():birthday.getDate();
                    var day = y+"-"+m+"-"+d;
                    $("#birthday").val(day);
                    var role = res.role;
                    if(role=="MANAGER") {
                        $("#role input[value='0']").parent().addClass("checked");
                    }else{
                        $("#role input[value='1']").parent().addClass("checked");
                    }


                }
            })
            /**
             * 修改提交
             */

            $("#change").on("click", function () {
                var $uname = $("#user").val();
                var $pwd = $("#pwd").val();
                var $rname = $("#user-name").val();
                var $sex = $("#sex .checked").find("input").val()==0?"男":"女";
                var $tel = $("#telphone").val();
                var $role = $("#role .checked").find("input").val()==0?"MANAGER":"SUBJECT";
                var $birthday = $("#birthday").val();
                var dataInfo = JSON.stringify({"id":userId,"realName":$rname,"birthday":$birthday,"telephone":$tel,"role":$role,"userName":$uname,"gender":$sex});
                var r = confirm("是否确认修改用户信息？");
                if(r){
                    $.ajax({
                        type:"PUT",
                        url:"http://123.206.18.189:8080/users/"+userId,
                        contentType:"application/json",
                        beforeSend: function(xhr){xhr.setRequestHeader('authToken', token);},
                        data:dataInfo,
                        dataType:'json',
                        success:function (res) {
                            console.log(res);
                        },
                        error:function (XMLHttpRequest, textStatus, errorThrown) {
                            console.log(XMLHttpRequest.status);
                            console.log(XMLHttpRequest.readyState);
                            console.log(textStatus);
                        },
                        complete:function (XMLHttpRequest) {
                            if(XMLHttpRequest.status==200 && XMLHttpRequest.readyState==4){
                                alert("人员信息修改成功！");
                                window.history.back();
                            }

                        }
                    })
                }


            })
        });
    </script>

</body>
</html>